<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css Simple Tree</title>
<style type="text/css">
body {
	font: 16px Georgia, serif;margin:20px auto 50px;
}

a {
	text-decoration: none;
}

#page-wrap
{
	width: 500px; margin: 0 auto;
}

.tree {
	list-style: none;
	font:14px/17px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.tree ul {
	list-style: none; 
	background:transparent url(graypixel.png) repeat-y scroll 15px 0;
    margin:0;
	padding:0 0 0 16px;
}
.tree ul li {
	background:transparent url(graypixel.png) repeat-x scroll 0 12px;
    margin:0 0;
    padding:0 0 0 10px;
}

.tree li a {
    background:white none repeat scroll 0 0;
	color: #159;
    display:block;
    padding:3px;
}

.tree li a:hover {
    color: #08F;
	/*outline:1px solid #666;*/
}


</style>
</head>

<body>
	<div id="page-wrap"> 
 
		<h1>Css Tree Example</h1> 
		<p>By <a href="http://davidxl.blogspot.com/">David<strong>XL</strong></a></p> 
        <ul class="tree"> 
            <li><a href="#">Civil Engineering</a> 
                <ul> 
                    <li><a href="#">Cowley Hall Parking Lot Recontruction</a></li> 
                    <li><a href="#">Culver’s Home Office</a></li> 
                    <li><a href="#">First Addition to Highland Addition</a></li> 
                    <li><a href="#">Fox Point Apartments</a> 
                        <ul> 
                            <li><a href="#">East Side</a></li>
                            <li><a href="#">Culver's Home Office</a></li> 
                            <li><a href="#">Metropolitan Place Phase II</a></li> 
                            <li><a href="#">Oak Park Place of Baraboo</a>
                                <ul> 
                                    <li><a href="#">East Side</a></li> 
                                    <li><a href="#">Fox Point Apartments</a> 
                                        <ul> 
                                            <li><a href="#">East Side</a></li>
                                            <li><a href="#">Culver's Home Office</a></li> 
                                            <li><a href="#">Metropolitan Place Phase II</a></li> 
                                            <li><a href="#">Oak Park Place of Baraboo</a></li> 
                                                
                                            <li><a href="#">Premier Coop</a></li> 
                                            <li><a href="#">West Side</a><ul> 
                                                    <li><a href="#">East Side</a></li> 
                                                    <li><a href="#">West Side</a></li> 
                                                </ul> </li> 
                                        </ul> 
                                    </li> 
                                    <li><a href="#">West Side</a></li> 
                                </ul> </li> 
                            <li><a href="#">Premier Coop</a></li> 
                            <li><a href="#">West Side</a></li> 
                        </ul> 
                    </li> 
                    <li><a href="#">Metropolitan Place Phase II</a></li> 
                    <li><a href="#">Oak Park Place of Baraboo</a></li> 
                    <li><a href="#">Premier Coop</a></li> 
                    <li><a href="#">Sleep Inn & Suites</a>
                    	<ul> 
                            <li><a href="#">East Side</a></li> 
                            <li><a href="#">West Side</a></li> 
                        </ul> </li> 
                    <li><a href="#">Tradewinds Business Center</a></li> 
                    <li><a href="#">UW-Madison Nielsen Tennis Stadium</a></li> 
                </ul> 
            </li> 
            <li><a href="#">Environmental Engineering</a></li> 
            <li><a href="#">Telecommunications Engineering</a> 
                <ul> 
                    <li><a href="#">Nsight TeleServices (CellCom) Wisconsin</a></li> 
                    <li><a href="#">Oakland County/Radian Communications Michigan</a></li> 
                    <li><a href="#">T-Mobile Site Deployment</a>
                    	<ul> 
                            <li><a href="#">East Side</a></li> 
                            <li><a href="#">West Side</a></li> 
                        </ul> </li>
                    <li><a href="#">U.S. Cellular Network Development</a></li> 
                    <li><a href="#">Western Wireless South Dakota</a></li> 
                </ul> 
            </li>
            <li><a href="#">Nsight TeleServices (CellCom) Wisconsin</a></li> 
        </ul> 
        	
	</div> 
</body>
</html>
